{% extends "pos/base.html" %}
{% load static %}

{% block title %}Delivery #{{ delivery.t_id }}{% endblock %}

{% block content %}
<div class="container-fluid mt-3">
  <div class="card shadow-sm mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
      <div>
        <h5 class="mb-0 font-weight-bold">Delivery #{{ delivery.t_id }}</h5>
        <small class="text-muted">Invoice #{{ delivery.invoice_t_id }}</small>
      </div>
      <a class="btn btn-light btn-sm" href="{% url 'good_transport:deliveries:list' %}">Back</a>
    </div>

    <div class="card-body">
      <div class="row">
        <div class="col-md-3"><strong>Status:</strong> {{ delivery.get_status_display }}</div>
        <div class="col-md-3"><strong>Date:</strong> {{ delivery.delivery_date|date:"d-m-Y h:i A" }}</div>
        <div class="col-md-3"><strong>Hub:</strong> {{ delivery.delivery_city }}</div>
        <div class="col-md-3"><strong>Received By:</strong> {{ delivery.received_by_name }}</div>
      </div>

      <hr>

      {% if invoice %}
        <div class="row">
          <div class="col-md-3"><strong>Invoice:</strong> #{{ invoice.invoice_no }}</div>
          <div class="col-md-3"><strong>Builty:</strong> {{ invoice.builty_no|default:"-" }}</div>
          <div class="col-md-3"><strong>Route:</strong> {{ invoice.from_city }} → {{ invoice.to_city }}</div>
          <div class="col-md-3"><strong>Current Status:</strong> {{ invoice.get_flow_status_display }}</div>
        </div>
      {% endif %}

      {% if delivery.remarks %}
        <hr>
        <strong>Remarks:</strong> {{ delivery.remarks }}
      {% endif %}
    </div>
  </div>

  <div class="card shadow-sm">
    <div class="card-header">
      <h6 class="mb-0 font-weight-bold">Delivery Lines</h6>
    </div>

    <div class="table-responsive">
      <table class="table table-sm table-bordered mb-0">
        <thead class="thead-light">
          <tr>
            <th>#</th>
            <th>Item</th>
            <th class="text-right">Booked</th>
            <th class="text-right">Received</th>
            <th class="text-right">Damage</th>
            <th class="text-right">Short</th>
            <th>Damage Remarks</th>
          </tr>
        </thead>
        <tbody>
          {% for line in lines %}
            <tr>
              <td>{{ forloop.counter }}</td>
              <td>{{ line.product_name }}</td>
              <td class="text-right">{{ line.booked_qty|floatformat:2 }}</td>
              <td class="text-right">{{ line.received_qty|floatformat:2 }}</td>
              <td class="text-right">{{ line.damaged_qty|floatformat:2 }}</td>
              <td class="text-right">{{ line.short_qty|floatformat:2 }}</td>
              <td>{{ line.damage_remarks|default:"-" }}</td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="7" class="text-center text-muted py-3">No lines.</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}